<template>
  <div>
    <div class="detail_wrap">
      <div class="detail_left">
        <div class="approval_person">
          <h1>申请人信息</h1>
          <div class="approval_info_detail">
            <div>姓名:{{ approvalDetail.username }}</div>
            <div style="display: flex; justify-content: space-between;">
              <span>部门:{{ approvalDetail.departmentName }}</span>
              <span>入职时间:{{ approvalDetail.timeOfEntry }}</span>
            </div>
          </div>
        </div>
        <div class="approval_info">
          <!-- 请假申请 -->
          <div v-if="approvalDetail.processName=='请假'">
            <h1>请假申请</h1>
            <div class="approval_info_detail">
              <div style="display: flex; justify-content: space-between;">
                <span>审批类型：{{ approvalDetail.processName }}</span>
                <span>开始时间:{{ approvalDetail.procData.startTime }}</span>
              </div>
              <div style="display: flex; justify-content: space-between;">
                <span>休假类别:{{ approvalDetail.procData.processName }}</span>
                <span>结束时间:{{ approvalDetail.procData.endTime }}</span>
              </div>
              <div style="display: flex; justify-content: space-between;">
                <span>请假时长:{{ approvalDetail.procData.duration }}</span>
                <span>申请单位:{{ approvalDetail.procData.applyUnit }}</span>
              </div>
              <div style="display: flex; justify-content: space-between;">
                <span>申请事由:{{ approvalDetail.procData.reason }}</span>
                <span>审批状态:{{ approvalDetail.processState }}</span>
              </div>
            </div>
          </div>
          <!-- 离职申请 -->
          <div v-if="approvalDetail.processName=='离职'">
            <h1>离职申请</h1>
            <div class="approval_info_detail">
              <div style="display: flex; justify-content: space-between;">
                <span>申请类型:{{ approvalDetail.processName }}</span>
                <span>期望离职时间:{{ approvalDetail.procData.exceptTime }}</span>
              </div>
              <div style="display: flex; justify-content: space-between;">
                <span>离职原因:{{ approvalDetail.procData.reason }}</span>
              </div>
            </div>
          </div>
          <!-- 加班申请 -->
          <div v-if="approvalDetail.processName=='加班'">
            <h1>加班申请</h1>
            <div class="approval_info_detail">
              <div style="display: flex; justify-content: space-between;">
                <span>补偿方式:{{ approvalDetail.procData.compensation }}</span>
                <span>加班开始时间:{{ approvalDetail.procData.start_time }}</span>
              </div>
              <div style="display: flex; justify-content: space-between;">
                <span>加班结束时间:{{ approvalDetail.procData.end_time }}</span>
                <span>申请原因:{{ approvalDetail.procData.reason }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail_right">
        <el-timeline style="margin:30px;">
          <el-timeline-item
            v-for="(item, index) in approvalList"
            :key="index"
            :icon="item.icon"
            :size="item.size"
            :type="item.type"
            :timestamp="item.handleTime"
          >
            {{ item.handleUserName }} {{ item.handleOpinion }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>
<script>
import { getApprovalDetail, getApprovalProcess } from '@/api/approval'
export default {
  data() {
    return {
      approvalList: [], // 审批流程列表
      approvalDetail: {}, // 审批详情
      activities: [{
        content: '支持使用图标',
        timestamp: '2018-04-12 20:46',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        content: '支持自定义颜色',
        timestamp: '2018-04-03 20:46',
        color: '#0bbd87'
      }, {
        content: '支持自定义尺寸',
        timestamp: '2018-04-03 20:46',
        size: 'large'
      }, {
        content: '默认样式的节点',
        timestamp: '2018-04-03 20:46'
      }]

    }
  },
  created() {
    this.getDetail(this.$route.params.id)
    this.getApprovalList(this.$route.params.id)
  },
  methods: {
    async getDetail(id) { // 获取申请详情
      const res = await getApprovalDetail(id)
      console.log(res, '审批详情')
      this.approvalDetail = res.data
      this.approvalDetail.procData = JSON.parse(res.data.procData)
    },
    async getApprovalList(id) {
      const res = await getApprovalProcess(id)
      console.log(res, '获取审批流程')
      const arr = res.data.map(item => {
        return {
          ...item,
          icon: 'el-icon-success',
          size: 'large',
          type: 'success'
        }
      })
      this.approvalList = arr
    }
  }
}
</script>
<style lang="scss">
  .detail_wrap{
    width: 100%;
    display: flex;
    .detail_left{
      padding: 20px;
      box-sizing: border-box;
      flex:1;
      font-size: 20px;
      font-weight: bold;
      // background: darkseagreen;
      .approval_person{
        height:160px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

      }
      .approval_info_detail{
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
    }
    .detail_right{
      width: 406px;
      height: 500px;
      // background: darkkhaki;
    }
  }
</style>
